<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心弹窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            background: linear-gradient(to bottom, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            position: relative;
            min-height: 100vh;
        }

        /* 繁星背景 */
        .stars-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 2s infinite;
        }

        .star.small {
            width: 1px;
            height: 1px;
            opacity: 0.6;
        }

        .star.medium {
            width: 2px;
            height: 2px;
            opacity: 0.8;
        }

        .star.large {
            width: 3px;
            height: 3px;
            opacity: 1;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        /* 流星特效 - 从右上向左下，严格平行 */
        .meteor {
            position: fixed;
            width: 4px;
            height: 300px;
            background: linear-gradient(to bottom, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(255, 255, 255, 0.95) 5%,
                rgba(255, 255, 255, 0.8) 15%,
                rgba(255, 255, 255, 0.6) 30%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0.2) 70%,
                rgba(255, 255, 255, 0.1) 85%,
                transparent 100%);
            border-radius: 2px;
            z-index: 500;
            pointer-events: none;
            transform: rotate(-45deg);
            transform-origin: center top;
            /* 强烈的拖尾发光效果 */
            box-shadow: 
                0 0 8px rgba(255, 255, 255, 1),
                0 0 15px rgba(255, 255, 255, 0.9),
                0 0 25px rgba(255, 255, 255, 0.7),
                0 0 35px rgba(255, 255, 255, 0.5),
                0 0 50px rgba(135, 206, 250, 0.6),
                0 0 70px rgba(135, 206, 250, 0.4),
                0 0 100px rgba(135, 206, 250, 0.2);
            animation: meteorFall linear forwards;
        }

        /* 流星头部亮点 */
        .meteor::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            box-shadow: 
                0 0 15px white,
                0 0 30px white,
                0 0 45px rgba(255, 255, 255, 0.9),
                0 0 60px rgba(135, 206, 250, 0.8),
                0 0 80px rgba(135, 206, 250, 0.6);
        }

        /* 流星长拖尾 */
        .meteor::after {
            content: '';
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 250px;
            height: 4px;
            background: linear-gradient(to right, 
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 255, 255, 0.6) 20%,
                rgba(255, 255, 255, 0.4) 40%,
                rgba(135, 206, 250, 0.5) 60%,
                rgba(135, 206, 250, 0.3) 80%,
                transparent 100%);
            border-radius: 2px;
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 0.6),
                0 0 30px rgba(255, 255, 255, 0.4),
                0 0 50px rgba(135, 206, 250, 0.3);
        }

        @keyframes meteorFall {
            0% {
                transform: rotate(-45deg);
                opacity: 1;
            }
            100% {
                /* 所有流星沿着相同的对角线路径移动，完全平行，不会交叉 */
                transform: rotate(-45deg) translateY(calc(100vh + 100vw + 300px));
                opacity: 0;
            }
        }

        .heart-popup {
            position: fixed;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 20px 25px;
            box-shadow: 0 10px 40px rgba(255, 107, 157, 0.5), 0 0 30px rgba(255, 107, 157, 0.3);
            z-index: 1000;
            max-width: 200px;
            width: 180px;
            min-height: 100px;
            text-align: center;
            border: 2px solid #ff6b9d;
            opacity: 0;
        }

        .heart-popup.sliding {
            animation: slideToHeart 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .heart-popup.arrived {
            animation: heartBeat 0.6s ease-in-out, float 2s ease-in-out 0.6s infinite;
        }

        /* 若隐若现的浮动字段样式 - 简洁弹出框 */
        .floating-text {
            position: fixed;
            color: #333333;
            font-size: 16px;
            font-weight: 600;
            z-index: 500;
            pointer-events: none;
            white-space: nowrap;
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'YouYuan', 'KaiTi', 'FangSong', 'STHeiti', 'SimHei', 'Meiryo', 'Yu Gothic Medium', 'Yu Gothic', 'MS Gothic', Arial, sans-serif;
            
            /* 简洁的背景颜色 */
            background: rgba(255, 182, 193, 0.85);
            
            /* 简洁的边框 */
            border: 1px solid rgba(255, 107, 157, 0.6);
            border-radius: 8px;
            
            /* 内边距 */
            padding: 10px 16px;
            
            /* 简洁的阴影效果 */
            box-shadow: 
                0 2px 8px rgba(255, 107, 157, 0.4),
                0 4px 16px rgba(255, 107, 157, 0.3),
                0 0 15px rgba(255, 182, 193, 0.5);
            
            animation: floatingTextFade 4s ease-in-out infinite;
            
            /* 确保文字不会被截断，但不占满屏幕 */
            max-width: 250px;
        }

        @keyframes floatingTextFade {
            0%, 100% {
                opacity: 0.5;
                transform: translateY(0px);
            }
            50% {
                opacity: 0.9;
                transform: translateY(-8px);
            }
        }

        @keyframes slideToHeart {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 1;
            }
        }

        .heart-popup::before {
            content: '💖';
            font-size: 28px;
            display: block;
            margin-bottom: 10px;
            animation: float 2s ease-in-out infinite;
        }

        .heart-popup .message {
            font-size: 14px;
            color: #333;
            line-height: 1.5;
            font-weight: 500;
            word-wrap: break-word;
            overflow: hidden;
        }

        @keyframes heartBeat {
            0% {
                transform: scale(0.8);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.8);
            }
        }

        .heart-popup.closing {
            animation: fadeOut 0.5s ease-out forwards;
        }

        /* 茜茜大王的专属按钮样式 */
        .xixi-button-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2000;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .xixi-button-container.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .xixi-button {
            position: relative;
            background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 50%, #ffb3c6 100%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            padding: 20px 50px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 
                0 10px 30px rgba(255, 107, 157, 0.4),
                0 0 0 5px rgba(255, 255, 255, 0.3),
                inset 0 2px 10px rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            min-width: 320px;
            animation: buttonGlow 2s ease-in-out infinite;
        }

        .xixi-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        .xixi-button:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 
                0 15px 40px rgba(255, 107, 157, 0.6),
                0 0 0 8px rgba(255, 255, 255, 0.4),
                inset 0 2px 10px rgba(255, 255, 255, 0.4);
        }

        .xixi-button:active {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 8px 20px rgba(255, 107, 157, 0.5),
                0 0 0 5px rgba(255, 255, 255, 0.3),
                inset 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* 小动物装饰 - 趴在按钮上 */
        .xixi-button .animals {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-around;
            gap: 15px;
            pointer-events: none;
            font-size: 32px;
            animation: animalsBounce 1.5s ease-in-out infinite;
            width: 100%;
            padding: 0 20px;
        }

        .xixi-button .animals .animal {
            animation: animalFloat 2s ease-in-out infinite;
        }

        .xixi-button .animals .animal:nth-child(1) {
            animation-delay: 0s;
        }

        .xixi-button .animals .animal:nth-child(2) {
            animation-delay: 0.3s;
        }

        .xixi-button .animals .animal:nth-child(3) {
            animation-delay: 0.6s;
        }

        @keyframes buttonGlow {
            0%, 100% {
                box-shadow: 
                    0 10px 30px rgba(255, 107, 157, 0.4),
                    0 0 0 5px rgba(255, 255, 255, 0.3),
                    inset 0 2px 10px rgba(255, 255, 255, 0.3);
            }
            50% {
                box-shadow: 
                    0 10px 40px rgba(255, 107, 157, 0.6),
                    0 0 0 6px rgba(255, 255, 255, 0.4),
                    inset 0 2px 10px rgba(255, 255, 255, 0.3);
            }
        }

        @keyframes shine {
            0% {
                left: -100%;
            }
            100% {
                left: 200%;
            }
        }

        @keyframes animalsBounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }

        @keyframes animalFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-3px) rotate(-5deg);
            }
            75% {
                transform: translateY(-3px) rotate(5deg);
            }
        }

        .xixi-button .button-text {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 繁星背景 -->
    <div class="stars-container" id="starsContainer"></div>

    <!-- 茜茜大王的专属按钮 -->
    <div class="xixi-button-container">
        <button class="xixi-button" id="xixiButton">
            <div class="animals">
                <span class="animal">🐱</span>
                <span class="animal">🐰</span>
                <span class="animal">🐻</span>
            </div>
            <span class="button-text">茜茜大王的专属按钮</span>
        </button>
    </div>
    <script>
        let messages = [];
        let messageIndex = 0;
        let activePopups = [];
        let popupInterval = null;
        const maxConcurrentPopups = 30; // 最大同时显示的弹窗数量

        // 茜茜大王的专属消息（100条）
        const xixiMessages = [
            "茜茜大王今天有没有好好吃饭呀！",
            "微臣来叫陛下起床啦！",
            "小东西又赖床是吧！",
            "太阳都要晒屁屁了~",
            "茜茜大王是不是又熬夜了？",
            "陛下该起床用膳了！",
            "小懒虫，快起床啦！",
            "太阳公公都出来了，茜茜大王还在睡吗？",
            "微臣恭候陛下起床！",
            "茜茜大王今天心情怎么样呀？",
            "小可爱是不是还没起床？",
            "陛下，该起床享用早餐啦！",
            "茜茜大王，新的一天开始啦！",
            "小懒猫还在被窝里吗？",
            "陛下，起床时间到啦！",
            "茜茜大王今天有安排吗？",
            "小宝贝是不是还在做梦呢？",
            "太阳都升这么高了，该起床啦！",
            "微臣请陛下起床！",
            "茜茜大王，美好的一天在等你哦！",
            "小甜心是不是还在赖床？",
            "陛下，该起床看世界啦！",
            "茜茜大王今天想吃什么呀？",
            "小可爱，起床时间到啦！",
            "太阳都晒被子了，还不起来吗？",
            "微臣来叫醒睡美人啦！",
            "茜茜大王，起床吃好吃的啦！",
            "小懒虫，再不起床就没早餐啦！",
            "陛下，美好的一天从起床开始！",
            "茜茜大王今天有什么计划吗？",
            "小甜心，该起床啦！",
            "陛下，起床时间到了哦！",
            "茜茜大王是不是睡得很香？",
            "小可爱，快起床看看外面的世界！",
            "太阳都爬到头顶了，还不起来吗？",
            "微臣恭请陛下起床！",
            "茜茜大王，早餐准备好了哦！",
            "小懒猫，起床啦！",
            "陛下，该起床活动活动啦！",
            "茜茜大王今天心情好吗？",
            "小宝贝，起床时间到啦！",
            "太阳都晒到屁屁了，该起床啦！",
            "微臣来唤醒陛下啦！",
            "茜茜大王，新的一天开始啦！",
            "小东西，还在被窝里赖床吗？",
            "陛下，该起床看看美丽的天气啦！",
            "茜茜大王今天想吃什么呢？",
            "小甜心，起床时间到啦！",
            "太阳都晒被子了，快起床吧！",
            "微臣请陛下起床用膳！",
            "茜茜大王，美好的一天等着你！",
            "小懒虫，再不起床就错过美好时光啦！",
            "陛下，该起床看看新的一天啦！",
            "茜茜大王是不是睡得很舒服？",
            "小可爱，起床时间到啦！",
            "太阳都爬得那么高了，还不起来吗？",
            "微臣恭候陛下起床！",
            "茜茜大王，早餐时间到啦！",
            "小懒猫，起床看看外面的世界吧！",
            "陛下，该起床活动筋骨啦！",
            "茜茜大王今天想做什么呢？",
            "小宝贝，起床时间到啦！",
            "太阳都晒到头顶了，该起床啦！",
            "微臣来叫醒陛下啦！",
            "茜茜大王，新的一天充满美好！",
            "小东西，还在做梦吗？快起床啦！",
            "陛下，该起床看看今天的天气啦！",
            "茜茜大王今天有约会吗？",
            "小甜心，起床时间到啦！",
            "太阳都晒被子了，还不快起床！",
            "微臣恭请陛下起床！",
            "茜茜大王，早餐已经准备好了！",
            "小懒虫，再不起床就来不及了！",
            "陛下，该起床迎接新的一天啦！",
            "茜茜大王是不是还不想起床？",
            "小可爱，起床看看美丽的世界吧！",
            "太阳都升得那么高了，该起床啦！",
            "微臣来唤醒睡美人啦！",
            "茜茜大王，美好的一天在等着你！",
            "小懒猫，起床时间到啦！",
            "陛下，该起床活动活动啦！",
            "茜茜大王今天心情如何？",
            "小宝贝，起床看看新的一天吧！",
            "太阳都晒到屁屁了，快起床！",
            "微臣请陛下起床用膳！",
            "茜茜大王，新的一天充满惊喜！",
            "小东西，还在被窝里吗？快起床啦！",
            "陛下，该起床看看外面的风景啦！",
            "茜茜大王今天想吃什么好吃的？",
            "小甜心，起床时间到啦！",
            "太阳都爬那么高了，还不起来吗？",
            "微臣恭候陛下起床！",
            "茜茜大王，早餐时间到了哦！",
            "小懒虫，起床看看美好的一天吧！",
            "陛下，该起床开始新的旅程啦！",
            "茜茜大王是不是还不想起来？",
            "小可爱，起床时间到啦！",
            "太阳都晒到被子了，该起床啦！",
            "微臣来叫醒陛下啦！",
            "茜茜大王，新的一天开始啦！",
            "小懒猫，起床看看美丽的世界吧！",
            "陛下，该起床活动一下啦！"
        ];

        // 创建繁星
        function createStars() {
            const starsContainer = document.getElementById('starsContainer');
            const starCount = 150; // 繁星数量
            
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机大小
                const size = Math.random();
                if (size < 0.5) {
                    star.classList.add('small');
                } else if (size < 0.8) {
                    star.classList.add('medium');
                } else {
                    star.classList.add('large');
                }
                
                // 随机位置
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                
                // 随机闪烁延迟
                star.style.animationDelay = Math.random() * 2 + 's';
                star.style.animationDuration = (1 + Math.random() * 2) + 's';
                
                starsContainer.appendChild(star);
            }
        }

        // 创建流星 - 从右上向左下飞（绝对平行，绝不交叉）
        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            
            // 速度固定或小范围变化（2-2.5秒），确保流畅
            const duration = 2.0 + Math.random() * 0.5;
            meteor.style.animationDuration = duration + 's';
            
            // 所有流星都从右上角的不同位置开始
            // 但都使用相同的动画路径（沿-45度对角线），确保完全平行
            const t = Math.random();
            const maxOffset = Math.min(window.innerWidth * 0.4, window.innerHeight * 0.4);
            const offset = t * maxOffset;
            
            // 起点位置：右上角区域，沿对角线分布
            meteor.style.position = 'fixed';
            meteor.style.right = (-100 - offset) + 'px';
            meteor.style.top = (-100 - offset) + 'px';
            meteor.style.transformOrigin = 'center top';
            
            document.body.appendChild(meteor);
            
            // 动画结束后移除
            setTimeout(() => {
                if (meteor.parentNode) {
                    meteor.parentNode.removeChild(meteor);
                }
            }, duration * 1000 + 200);
        }

        // 持续创建流星（增加数量，避免交叉）
        function startMeteorShower() {
            // 立即创建第一个
            createMeteor();
            
            // 更频繁地创建流星（每1.5-3秒一个）
            setInterval(() => {
                createMeteor();
            }, 1500 + Math.random() * 1500);
        }

        // 从后端获取所有文段
        async function loadMessages() {
            try {
                const response = await fetch('/api/messages');
                const data = await response.json();
                messages = data.messages || [];
                console.log(`已加载 ${messages.length} 条文段`);
            } catch (error) {
                console.error('加载文段失败:', error);
                // 如果API失败，使用备用文段
                messages = ['💕 你是我生命中最美好的遇见', '💖 每一次想你，都让我的心跳加速'];
            }
        }

        // 计算爱心形状的坐标点（参数方程）
        function getHeartPoints(count) {
            const points = [];
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight / 2;
            // 根据屏幕大小调整爱心大小，使其在屏幕中央清晰可见
            const scale = Math.min(window.innerWidth, window.innerHeight) * 0.35;
            
            for (let i = 0; i < count; i++) {
                const t = (i / count) * 2 * Math.PI;
                // 爱心曲线参数方程 (心形线)
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
                
                points.push({
                    x: centerX + x * scale / 16,
                    y: centerY + y * scale / 16
                });
            }
            return points;
        }

        // 判断点是否在爱心内部（简化判断）
        function isPointInHeart(x, y) {
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight / 2;
            const scale = Math.min(window.innerWidth, window.innerHeight) * 0.35;
            const heartRadius = scale * 0.8; // 爱心的大致半径
            
            // 计算点到爱心中心的距离
            const dx = x - centerX;
            const dy = y - centerY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            // 简化判断：如果在爱心中心附近的一个圆形区域内，认为在爱心内
            // 考虑到爱心不是标准圆形，这里使用一个较大的半径作为安全距离
            return distance < heartRadius;
        }

        // 获取一个不在爱心内部的位置
        function getPositionOutsideHeart(maxAttempts = 50) {
            let x, y;
            let attempts = 0;
            
            do {
                // 优先在屏幕四周和边缘
                const area = Math.random();
                if (area < 0.3) {
                    // 上边缘
                    x = Math.random() * window.innerWidth;
                    y = Math.random() * (window.innerHeight * 0.15);
                } else if (area < 0.5) {
                    // 下边缘
                    x = Math.random() * window.innerWidth;
                    y = window.innerHeight * 0.85 + Math.random() * (window.innerHeight * 0.15);
                } else if (area < 0.7) {
                    // 左边缘
                    x = Math.random() * (window.innerWidth * 0.15);
                    y = Math.random() * window.innerHeight;
                } else if (area < 0.85) {
                    // 右边缘
                    x = window.innerWidth * 0.85 + Math.random() * (window.innerWidth * 0.15);
                    y = Math.random() * window.innerHeight;
                } else {
                    // 爱心周围（但在爱心外部）
                    const angle = Math.random() * 2 * Math.PI;
                    const centerX = window.innerWidth / 2;
                    const centerY = window.innerHeight / 2;
                    const scale = Math.min(window.innerWidth, window.innerHeight) * 0.35;
                    const heartRadius = scale * 0.8;
                    const distance = heartRadius + 100 + Math.random() * 150; // 在爱心外部至少100px
                    
                    x = centerX + Math.cos(angle) * distance;
                    y = centerY + Math.sin(angle) * distance;
                }
                
                attempts++;
            } while (isPointInHeart(x, y) && attempts < maxAttempts);
            
            // 确保坐标在屏幕范围内
            x = Math.max(20, Math.min(window.innerWidth - 20, x));
            y = Math.max(20, Math.min(window.innerHeight - 20, y));
            
            return { x, y };
        }

        // 创建若隐若现的浮动字段
        function createFloatingText() {
            const floatingText = document.createElement('div');
            floatingText.className = 'floating-text';
            
            // 随机选择一条消息
            const randomIndex = Math.floor(Math.random() * xixiMessages.length);
            floatingText.textContent = xixiMessages[randomIndex];
            
            // 获取一个不在爱心内部的位置
            const pos = getPositionOutsideHeart();
            floatingText.style.left = pos.x + 'px';
            floatingText.style.top = pos.y + 'px';
            
            // 随机延迟和持续时间
            const delay = Math.random() * 0.5;
            const duration = 4 + Math.random() * 2; // 4-6秒
            floatingText.style.animationDelay = delay + 's';
            floatingText.style.animationDuration = duration + 's';
            
            // 随机大小变化
            const scale = 0.9 + Math.random() * 0.3;
            floatingText.style.transform = `scale(${scale})`;
            
            document.body.appendChild(floatingText);
            
            // 动画结束后移除
            setTimeout(() => {
                if (floatingText.parentNode) {
                    floatingText.style.opacity = '0';
                    floatingText.style.transition = 'opacity 0.5s ease-out';
                    setTimeout(() => {
                        if (floatingText.parentNode) {
                            floatingText.parentNode.removeChild(floatingText);
                        }
                    }, 500);
                }
            }, (duration + delay) * 1000);
        }

        // 启动若隐若现的浮动字段效果
        function startFloatingTexts() {
            const floatingCount = 40; // 同时显示的浮动字段数量
            
            // 立即创建一些浮动字段
            for (let i = 0; i < floatingCount; i++) {
                setTimeout(() => {
                    createFloatingText();
                }, i * 150); // 错开时间
            }
            
            // 持续创建新的浮动字段，保持若隐若现的效果
            const floatingInterval = setInterval(() => {
                // 保持一定数量的浮动字段
                const currentFloating = document.querySelectorAll('.floating-text').length;
                if (currentFloating < floatingCount) {
                    createFloatingText();
                }
            }, 1000); // 每秒检查一次
            
            // 10秒后停止创建新的浮动字段
            setTimeout(() => {
                clearInterval(floatingInterval);
            }, 10000);
        }

        // 从屏幕四周随机选择起始位置
        function getRandomStartPosition() {
            const side = Math.floor(Math.random() * 4); // 0:上, 1:右, 2:下, 3:左
            let x, y;
            
            switch(side) {
                case 0: // 上边
                    x = Math.random() * window.innerWidth;
                    y = -200;
                    break;
                case 1: // 右边
                    x = window.innerWidth + 200;
                    y = Math.random() * window.innerHeight;
                    break;
                case 2: // 下边
                    x = Math.random() * window.innerWidth;
                    y = window.innerHeight + 200;
                    break;
                case 3: // 左边
                    x = -200;
                    y = Math.random() * window.innerHeight;
                    break;
            }
            
            return { x, y };
        }

        // 创建单个爱心弹窗（从四周滑向爱心形状）
        function createHeartPopup(message, index = 0) {
            const popup = document.createElement('div');
            popup.className = 'heart-popup';
            
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message';
            messageDiv.textContent = message;
            
            popup.appendChild(messageDiv);
            
            // 获取爱心形状的坐标点
            const heartPoints = getHeartPoints(maxConcurrentPopups);
            const targetPoint = heartPoints[index % heartPoints.length];
            
            // 从屏幕四周随机起始位置
            const startPos = getRandomStartPosition();
            
            // 设置起始位置
            popup.style.left = startPos.x + 'px';
            popup.style.top = startPos.y + 'px';
            popup.style.opacity = '0';
            
            document.body.appendChild(popup);
            activePopups.push(popup);
            
            // 添加滑动动画类
            requestAnimationFrame(() => {
                popup.classList.add('sliding');
                
                // 使用 transform 实现平滑滑动
                const startX = startPos.x;
                const startY = startPos.y;
                const popupWidth = 180; // 弹窗宽度
                const popupHeight = 100; // 弹窗高度
                const endX = targetPoint.x - popupWidth / 2; // 减去弹窗宽度的一半，使中心对齐
                const endY = targetPoint.y - popupHeight / 2; // 减去弹窗高度的一半，使中心对齐
                
                popup.style.transition = 'transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-in';
                popup.style.transform = `translate(${endX - startX}px, ${endY - startY}px)`;
                popup.style.opacity = '1';
                
                // 动画结束后，设置为到达状态
                setTimeout(() => {
                    popup.style.left = endX + 'px';
                    popup.style.top = endY + 'px';
                    popup.style.transform = 'translate(0, 0)';
                    popup.style.transition = '';
                    popup.classList.remove('sliding');
                    popup.classList.add('arrived');
                }, 1500);
            });
            
            // 5秒后自动关闭
            setTimeout(() => {
                closePopup(popup);
            }, 5000);
            
            // 点击关闭
            popup.addEventListener('click', () => {
                closePopup(popup);
            });
        }

        // 关闭弹窗
        function closePopup(popup) {
            if (!popup || !popup.parentNode) return;
            
            popup.classList.add('closing');
            setTimeout(() => {
                if (popup.parentNode) {
                    popup.parentNode.removeChild(popup);
                }
                const index = activePopups.indexOf(popup);
                if (index > -1) {
                    activePopups.splice(index, 1);
                }
            }, 500);
        }

        // 获取随机消息
        function getRandomMessage() {
            if (messages.length === 0) return '';
            const randomIndex = Math.floor(Math.random() * messages.length);
            return messages[randomIndex];
        }

        // 启动满屏弹窗（点击按钮时调用）
        function startFullScreenPopups() {
            // 清除之前的定时器
            if (popupInterval) {
                clearInterval(popupInterval);
            }
            
            // 清除所有现有的弹窗
            activePopups.forEach(popup => {
                if (popup.parentNode) {
                    popup.parentNode.removeChild(popup);
                }
            });
            activePopups = [];
            
            // 立即创建满屏弹窗，从四周滑向爱心形状
            const initialCount = Math.min(maxConcurrentPopups, messages.length);
            for (let i = 0; i < initialCount; i++) {
                // 每次随机选择消息
                const message = getRandomMessage();
                setTimeout(() => {
                    createHeartPopup(message, i);
                }, i * 80); // 错开时间，形成连续的滑动效果
            }
            
            messageIndex = initialCount;
            
            // 计算爱心动画完成的时间并返回
            // 最后一个弹窗创建时间：initialCount * 80ms
            // 滑动动画时间：1500ms
            // 到达后显示时间：3000ms (显示3秒让用户看到完整的爱心)
            // 总时间 = 最后一个弹窗创建时间 + 滑动时间 + 显示时间
            const lastPopupDelay = (initialCount - 1) * 80;
            const slideDuration = 1500;
            const displayDuration = 3000;
            const totalDuration = lastPopupDelay + slideDuration + displayDuration;
            
            return totalDuration;
        }

        // 茜茜大王按钮点击事件
        function setupXixiButton() {
            const button = document.getElementById('xixiButton');
            const buttonContainer = document.querySelector('.xixi-button-container');
            
            if (button && buttonContainer) {
                button.addEventListener('click', () => {
                    // 隐藏按钮
                    buttonContainer.classList.add('hidden');
                    
                    // 启动满屏弹窗效果（爱心汇聚）
                    let animationDuration = 0;
                    if (messages.length > 0) {
                        animationDuration = startFullScreenPopups();
                    }
                    
                    // 启动若隐若现的浮动字段效果
                    startFloatingTexts();
                    
                    // 创建多个流星特效（点击按钮时）
                    // 错开时间，避免重叠
                    for (let i = 0; i < 5; i++) {
                        setTimeout(() => {
                            createMeteor();
                        }, i * 400); // 间隔400ms，确保不会交叉
                    }
                    
                    // 按钮点击动画（在隐藏前短暂显示）
                    button.style.transform = 'translateY(-5px) scale(0.95)';
                    setTimeout(() => {
                        button.style.transform = '';
                    }, 150);
                    
                    // 等待爱心动画完成后显示按钮
                    setTimeout(() => {
                        buttonContainer.classList.remove('hidden');
                    }, animationDuration || 7000); // 默认7秒，如果有计算出的时间则使用计算的时间
                });
            }
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            createStars(); // 创建繁星
            startMeteorShower(); // 启动流星雨
            loadMessages(); // 加载文段
            setupXixiButton(); // 设置按钮事件
        });
    </script>
</body>
</html>

